<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <title>OpenLayers WMTS GetFeatureInfo Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../lib/Firebug/firebug.js"></script>
        <script src="../lib/OpenLayers.js"></script>
        <script src="wmts-getfeatureinfo.js"></script>
        <style>
            .olControlAttribution {
                bottom: 5px;
            }

            table.featureInfo, table.featureInfo td, table.featureInfo th {
                border: 1px solid #ddd;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                font-size: 80%;
                padding: .1em .1em;
            }
            table.featureInfo th {
                padding: .2em .2em;
                font-weight: bold;
                background: #eee;
            }
            table.featureInfo td {
                background: #fff;
            }
            table.featureInfo tr.odd td {
                background: #eee;
            }
            table.featureInfo caption {
                text-align: left;
                font-size: 100%;
                font-weight: bold;
                text-transform: uppercase;
                padding: .1em .2em;
            }

        </style>
    </head>
    <body onload="init();">
        <h1 id="title">WMTS GetFeatureInfo Control</h1>
        <div id="tags">
            wmts, tile, cache, getfeatureinfo
        </div>        
        <p id="shortdesc">
            The WMTSGetFeatureInfo control allows retrieval of information about
            features displayed in a WMTS layer.
        </p>
        
        <div id="map" class="smallmap"></div>
        <input id="drill" type="checkbox" checked="checked">
        <label for="drill">drill down</label>
        <div id="docs">
            <p>
                This example uses an OpenLayers.Control.WMTSGetFeatureInfo
                control layer to access information from WMTS layers.  The
                control is activated and configured to request feature 
                information when you click on the map.  If the control's 
                drillDown property is set to true, multiple layers can be 
                queried.
            </p><p>
                See the <a href="wmts-getfeatureinfo.js" target="_blank">
                wmts-getfeatureinfo.js source</a> to see how this is done.
            </p>
        </div>
    </body>
</html>
